<template>
	<view class="addaddressBox">
		<view class="formitem">
			<text class="label">收货人</text>
			<input class="uni-input" v-model="fData.receiveName" placeholder="请填写收货人姓名" />
		</view>
		<view class="formitem">
			<text class="label">联系方式</text>
			<input class="uni-input" v-model="fData.phone" placeholder="请填写收货人联系方式" />
		</view>
		<view class="formitem">
			<text class="label">所属区域</text>
			<view class="dpxz">
				<uni-data-picker class="mydpck" placeholder="请选择区域" popup-title="请选择所在地区" :localdata="dataTree" v-model="areaId"
								@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
							</uni-data-picker>
			</view>
			<!-- <input class="uni-input" v-model="fData.yy" placeholder="请选择收货地址所属区域" />
			<view class="licon">
				<image class="img" src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a17.png" mode="widthFix"></image>
			</view> -->
		</view>
		<view class="formitem">
			<text class="label">联系详细地址(具体街道、楼牌号等)</text>
			<input class="uni-input" v-model="fData.address" placeholder="请填写收货详细地址" />
		</view>
		<view class="addBtnbox">
			<view class="btn" @click="addAddress">保存</view>
		</view>
	</view>
</template>

<script>
	import areaList from '@/utils/area.js'
	import {addAddress} from '@/api/index.js'
	import user from "@/common/user.js"
	export default {
		data() {
			return {
				fData:{
					receiveName:'',
					phone:'',
					address:'',
					province:'',
					city:'',
					county:'',
					disUserId:user.getUserId()
				},
				areaId: '',//'150202',
				dataTree: areaList,
				editData:{}
			}
		},
		async onLoad(options){
			if(options && options.edata){
				this.editData = JSON.parse(options.edata)
				console.log("editData:",this.editData)
				this.fData.receiveName = this.editData.receiveName
				this.fData.phone = this.editData.phone
				this.fData.address = this.editData.address
				this.fData.id = this.editData.id
				this.areaId = this.getAreaCode(this.editData.province,this.editData.city,this.editData.county)[2]
				uni.setNavigationBarTitle({
					title:'修改地址'
				})
			}
		},
		mounted(){
			//console.log("areaList:",areaList)
		},
		methods: {
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				//console.log('onchange:', e.detail.value);
				const selectData = e.detail.value
				this.fData.province = selectData[0].text
				this.fData.city = selectData[1].text
				this.fData.county = selectData[2].text
			},
			async addAddress(){
				if(!this.fData.receiveName){
					return this.toast('请填写收货人姓名')
				}else if(!this.fData.phone){
					return this.toast('请填写收货人联系方式')
				}else if(!this.fData.county){
					return this.toast('请选择区域')
				}else if(!this.fData.address){
					return this.toast('请填写详细地址')
				}
				const res = await addAddress(this.fData)
				if(res.errorMessage){
					this.toast(res.errorMessage)
					return
				}
				uni.navigateBack()
			},
			toast(title){
				uni.showToast({
					title,
					icon:'none',
					duration: 2000
				});
			},
			getAreaCode(province,city,county){ // 根据省市区中文获取对应的code
				let codes = ['','','']
				//console.log(province,city,county)
				const provinceObj = this.returnNameCode(areaList,province)
				if(!provinceObj) return codes
				
				codes[0] = provinceObj.value
				const cityObj = this.returnNameCode(provinceObj.children,city)
				if(!cityObj) return codes
				
				codes[1] = cityObj.value
				const countyObj = this.returnNameCode(cityObj.children,county)
				if(!cityObj) return codes
				
				codes[2] = countyObj.value
				return codes
			},
			returnNameCode(arr,name){  // 返回制定数组数据
				const res = arr.find(item=>item.text == name)
				return res
			}
		}
	}
</script>

<style lang="scss">
	.addaddressBox{
		padding: 20rpx;
		font-size: 28rpx;
		.formitem{
			border-bottom: 1px solid #d7d4d4;
			padding:40rpx 0 0 0;
			&+.formitem{
				margin-top: 0;
			}
			.label{
				display: block;
				padding: 0 0 10rpx 20rpx;
			}
			.uni-input{
				height: 80rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
			}
		}
		.addBtnbox{
			position:fixed;
			z-index: 100;
			left: 0;
			bottom: 0;
			box-sizing:border-box;
			width: 100%;
			padding: 20rpx 100rpx;
			background-color: #fff;
			.btn{
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				color: #fff;
				font-size: 30rpx;
				border: none;
				height: 80rpx;
				border-radius: 40rpx;
				background-image: linear-gradient(#388cec, #2778d5);
				width: 100%;
				margin: 0 auto 0 auto;
			}
		}
	}
</style>

